<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/bootstrap.css">
    <title>表单控件的行为</title>
</head>
<body>
    <div class="container">
        <form>
            <h2>普通的表单控件</h2>
            <!-- 普通的boostrap表单控件获取到输入焦点后会添加一个蓝色阴影，失去焦点后会移除 -->
            <input type="text" class="form-control mt-3 mb-3">
            <h2>禁用表单控件</h2>
<!-- 加上disabled属性之后可以禁用表单控件，禁用后控件无法获取输入焦点，内容也无法选中，boostrap会加上一个灰色的背景 -->
            <input type="text" disabled class="form-control mt-3 mb-3" value="禁用的输入框">
            <textarea rows="3" class="form-control mt-3 mb-3" disabled>禁用的文本域</textarea>
            <select class="custom-select mt-3 mb-3" disabled>
                <option value="">禁用的选择框</option>
            </select>
            <h2>只读表单控件</h2>
            <!-- 加上readonly后表单控件会变为只读，可以获取焦点，但是无法修改里面的内容，boostrap会加上一个灰色的背景 -->
            <input type="text" readonly class="form-control mt-3 mb-3" value="这个文本框的内容无法被修改">
            <textarea rows="3" class="form-control mt-3 mb-3" readonly>这个文本域的内容无法被修改</textarea>
        </form>
    </div>
</body>
</html>